<template>
  <!-- 型号 -->
  <div>
    <el-row>
      <el-col :span="8">
        <el-select
          :disabled="disabledFlag"
          v-model="limitType"
          :placeholder="$t('请选择')"
          @change="changeStatus"
          value-key="code"
        >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="16" v-if="limitType == 2">
        <el-select v-model="checkedData" @change="changeData">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import nonStandardService from '@/services/nonStandardService'
import eventBus from '@/assets/utils/eventBus.js'
export default {
  name: 'modelConfigs',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: [Object, String],
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      },
    },
    type: Number,
    warehouseId: {
      type: String,
      default: '',
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      statusList: [
        { value: 1, label: this.$t('不限') },
        { value: 2, label: this.$t('指定') },
      ],

      options: [],
      checkedData: null,
      limitType: 1,
      spuId: null,
      disabledFlag: false,
    }
  },
  created() {
    if (this.value) {
      this.setData()
    }
    if (this.type == 1) {
      this.$emit('input', String(this.limitType))
    }
    eventBus.$on('changeValue', () => {
      this.$nextTick(() => {
        if (this.limitType == 1) {
          this.$emit('input', String(this.limitType))
        }
      })
    })
    eventBus.$on('categoryChange', (data) => {
      this.options = []
      this.checkedData = null
      if (data.spuId) {
        this.spuId = data.spuId
        this.queryData()
      } else {
        this.spuId = null
      }
      if (data.multipleFlag) {
        this.disabledFlag = true
        this.limitType = 1
        this.$emit('input', String(this.limitType))
      } else {
        this.disabledFlag = false
      }
    })
  },
  methods: {
    queryData() {
      let warehouseId = this.warehouseId || localStorage.getItem('warehouseId')
      if (warehouseId) {
        if (!this.spuId) {
          return
        }
        let params = {
          tenantId: localStorage.getItem('tenantId'),
          warehouseId,
          spuId: this.spuId,
        }
        nonStandardService.querySpuModel(params).then((res) => {
          if (res.code == 200) {
            this.options =
              res.data &&
              res.data.map((it) => {
                return {
                  ...it,
                  value: it.fullRangeValue,
                  label: it.fullRangeValue,
                }
              })
          }
        })
      }
    },
    setData() {
      let categoryData =
        this.data.category && this.data.category.indexOf('{') === 0
          ? JSON.parse(this.data.category)
          : {}
      if (categoryData.spuId) {
        this.spuId = categoryData.spuId
        this.queryData()
      }
      if (categoryData.checkedData && categoryData.checkedData.length > 1) {
        this.spuId = null
        this.disabledFlag = true
      }

      this.checkedData = JSON.parse(this.value).value
      this.limitType = JSON.parse(this.value).limitType
      localStorage.setItem('modelType', this.limitType)
    },
    changeStatus(val) {
      this.checkedData = null
      if (val == 1) {
        this.$emit('input', String(val))
      } else {
        this.$emit('input', '')
      }
      localStorage.setItem('modelType', val)
      /**状态改变，判断价格优先级 */
      eventBus.$emit('statusChange')
    },
    changeData(val) {
      this.$emit('input', this.checkedData)
    },

    getData() {
      return {
        value: this.checkedData,
        limitType: this.limitType,
      }
    },
  },
}
</script>
